<template>
  <div>
    <!-- 
      具名插槽 具有名字的插槽

      组件中可以放置多个坑位, 当放置多个的时候,就需要给这些坑取个名字,通过name属性

      没有去名字的坑,有个默认名字,叫做 default
     -->

    <slot name="top"></slot>
    <h1>欢迎</h1>
    <slot name="bottom"></slot>

    <hr />
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "HelloWorld",
    };
  },
};
</script>
